<template>
    <div class="content-wrap w-full">
        <div class="content-swiper overflow-hiddenl z-layout ant-row">
            <div class="content-swiper-wrap">
                <swiper/>
            </div>
        </div>
        <div class="content-item">
            <div class="content-item-wrap ant-row z-layout">
                <div class="item-wrap ant-row">
                    <div class="item-header-wrap ant-row z-layout">
                        <div class="item-header">
                            <a  class="item-header-left">
                                <i class="iconfont icon-textile-products"></i>
                                已上线教材
                            </a>
                            <div class="item-header-right table">
                                <div class="center-table search" v-if="show_search">
                                    <search/>
                                </div>
                                <div class="center-table media-search" v-else>
                                    <div class="search-icon"  @click="show_search = !show_search">
                                        <i class="iconfont icon-RectangleCopy"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item-content-wrap ">
                        <div>
                            <div class="item-content  ant-row">
                                <div v-for="item in 6" class="item-inner ant-col-md-6">
                                    <div class="item">
                                        <a href="">
                                            <div class="bank_item_on">
                                                <div class="item-top">
                                                    <img  src="https://cdn1.qingline.net/1609987154955">
                                                </div>
                                                <div class="item-bottom">
                                                    <div class="bank_name">C语言设计</div>
                                                    <div  class="bank_desc">
                                                        <div  class="bank_author point">
                                                            作者：谭浩强
                                                        </div>
                                                         <div  class="bank_number">
                                                            题量：1092
                                                        </div>
                                                    </div>
                                                    <div class="bank_button">查看详情</div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { watchEffect,watch,reactive,toRefs,defineComponent,computed,getCurrentInstance,onMounted} from 'vue'
import swiper from '../components/swiper/swiper.vue'
import search from '../components/search/search.vue'
export default defineComponent({
    name:'',
    components:{swiper,search},
    setup: ()=>{
        let data = reactive({
            show_search:true,
            current_width:1200,
            list:[
                {title:'C语言设计',author:'作者：谭浩强',num:'题量：1092'},
                {title:'C语言设计',author:'作者：谭浩强',num:'题量：1092'},
            ],
            noMore: false
        })
        const { proxy } = getCurrentInstance() as any;
        onMounted(() => {
            window.onresize = () =>{
                data.current_width = document.body.clientWidth
                console.log(data.current_width);
                
                if(data.current_width <= 992){
                    data.show_search = false
                }else{
                    data.show_search = true
                }
            }
        })
        const loadMore=()=>{
            console.log('Load More...')
            if (data.list.length >= 30) {
                data.noMore = true
            }
        }
        const loadedEnd=()=> {
            console.log('Images preload done.')
        }
        return {
           ...toRefs(data),loadMore,loadedEnd
        }
    }
})
</script>
<style lang="scss" scoped>
.content-wrap{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg,#fff,#eff8ff);

    .content-swiper{
        padding:20px;
        .content-swiper-wrap{
            width: 100%;
            border-radius: 1.3rem;
            overflow: hidden;
        }
    }
    .content-item{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .content-item-wrap{
            padding:20px;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item-wrap{
                display: flex;
                flex-direction: column;
                .item-header-wrap{
                    height: 3.5rem;
                    .item-header{
                        height: 100%;
                        align-items: center;
                        display: flex;
                        color: #fff;
                        justify-content: space-between;
                        .item-header-left{
                            width: 118px;
                            height: 48px;
                            line-height: 48px;
                            text-align: center;
                            background:linear-gradient(90deg,#5142ff,#2994ff);
                            color: #fff;
                            font-weight: 500;
                            font-size: 17.5px;
                            letter-spacing: 1px;
                            i{
                                display: none;
                            }
                        }
                        .item-header-right{
                            height: 100%;
                            .media-search{
                                display: none;
                            }
                        }
                    }
                }
                .item-content-wrap{
                    width: 100%;
                    margin-top: 28px;
                    .item-content{
                        height: auto;
                        //width: 100%;这里不可以加宽度100%
                            .item{
                                border-radius: 15px;
                                height: 100%;
                                background: #fff;
                                .bank_item_on{
                                    transition: all .5s;
                                    border: 1px solid transparent;
                                    overflow: hidden;
                                    border-radius: 15px;
                                    &:hover{
                                        border-color: #3258e7;
                                        color: #3258e7;
                                    }
                                    .item-top{
                                        display: flex;
                                        justify-content: center;
                                        background: #fff;
                                        overflow: hidden;
                                        background-size: 100%;
                                        border-bottom:1px solid #ececec;
                                        padding-top: 25px;
                                        height: 210px;
                                        img{
                                            width: 10.3571rem ;
                                            height: 13.1429rem;
                                        }
                                    }
                                    .item-bottom{
                                        padding: 10px;
                                        background: #fff;
                                        border-radius: 0 0 10px 10px;
                                        .bank_name{
                                            font-size: 17px;
                                            font-weight: 400;
                                            color: #313541;
                                            line-height: 25px;
                                            height: 50px;
                                            display: -webkit-box;
                                            word-break: break-all;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                            white-space: pre-line;
                                            -webkit-box-orient: vertical;
                                            -webkit-line-clamp: 2;
                                        }
                                        .bank_desc{
                                            margin-top: 8px;
                                            font-weight: 400;
                                            color: #313541;
                                            line-height: 20px;
                                            height: 40px;
                                            overflow: hidden;
                                        }
                                        .bank_button{
                                            opacity: 0;
                                            width: 0;
                                            display: none;
                                        }
                                    }
                                }
                        }
                        margin:0 -14.5px;
                        .item-inner{
                            padding: 10px 14.5px;
                            
                        }
                    }
                }
            }
        }
    }
}
</style>